<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄像头请求修复测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .camera-section {
            margin-bottom: 20px;
        }
        .camera-feed {
            border: 2px solid #ddd;
            border-radius: 4px;
            max-width: 100%;
            height: auto;
        }
        .status {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
            font-weight: bold;
        }
        .status.connecting {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }
        .status.connected {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status.error {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }
        .stat-item {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            border-left: 4px solid #007bff;
        }
        .stat-label {
            font-weight: bold;
            color: #495057;
        }
        .stat-value {
            font-size: 1.2em;
            color: #007bff;
        }
        .controls {
            margin: 20px 0;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
        button:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }
        .log {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 4px;
            padding: 10px;
            height: 200px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📹 摄像头请求修复测试</h1>
        <p>此页面用于测试摄像头网络请求的修复效果，监控请求状态和性能指标。</p>
        
        <div class="camera-section">
            <h2>摄像头画面</h2>
            <img id="cameraFeed" class="camera-feed" src="http://127.0.0.1:5001/video_feed" draggable="false" />
            <div id="status" class="status connecting">🔄 正在连接摄像头...</div>
        </div>
        
        <div class="stats">
            <div class="stat-item">
                <div class="stat-label">请求状态</div>
                <div id="requestStatus" class="stat-value">等待中</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">FPS</div>
                <div id="fpsDisplay" class="stat-value">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">请求计数</div>
                <div id="requestCount" class="stat-value">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">错误计数</div>
                <div id="errorCount" class="stat-value">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">取消计数</div>
                <div id="cancelCount" class="stat-value">0</div>
            </div>
            <div class="stat-item">
                <div class="stat-label">平均响应时间</div>
                <div id="avgResponseTime" class="stat-value">0ms</div>
            </div>
        </div>
        
        <div class="controls">
            <button onclick="startMonitoring()">开始监控</button>
            <button onclick="stopMonitoring()">停止监控</button>
            <button onclick="clearLog()">清除日志</button>
            <button onclick="testROI()">测试ROI模式</button>
        </div>
        
        <div class="log" id="log"></div>
    </div>

    <script>
        // 监控变量
        let requestCount = 0;
        let errorCount = 0;
        let cancelCount = 0;
        let responseTimes = [];
        let monitoring = false;
        let frameCount = 0;
        let lastFpsTime = performance.now();
        let currentFps = 0;
        
        const cameraFeed = document.getElementById('cameraFeed');
        const status = document.getElementById('status');
        const log = document.getElementById('log');
        
        function logMessage(message) {
            const timestamp = new Date().toLocaleTimeString();
            log.innerHTML += `[${timestamp}] ${message}\n`;
            log.scrollTop = log.scrollHeight;
        }
        
        function updateStats() {
            document.getElementById('requestStatus').textContent = monitoring ? '监控中' : '已停止';
            document.getElementById('requestCount').textContent = requestCount;
            document.getElementById('errorCount').textContent = errorCount;
            document.getElementById('cancelCount').textContent = cancelCount;
            
            if (responseTimes.length > 0) {
                const avgTime = responseTimes.reduce((a, b) => a + b, 0) / responseTimes.length;
                document.getElementById('avgResponseTime').textContent = `${avgTime.toFixed(1)}ms`;
            }
            
            document.getElementById('fpsDisplay').textContent = currentFps;
        }
        
        function startMonitoring() {
            monitoring = true;
            logMessage('🚀 开始监控摄像头请求');
            updateStats();
        }
        
        function stopMonitoring() {
            monitoring = false;
            logMessage('⏹️ 停止监控');
            updateStats();
        }
        
        function clearLog() {
            log.innerHTML = '';
            logMessage('🧹 日志已清除');
        }
        
        function testROI() {
            logMessage('🔧 测试ROI模式 - 发送暂停请求');
            fetch('http://127.0.0.1:5001/pendulum_pause', {method: 'POST'})
                .then(response => {
                    logMessage(`✅ 暂停请求成功: ${response.status}`);
                    setTimeout(() => {
                        logMessage('🔄 3秒后恢复视频流');
                        return fetch('http://127.0.0.1:5001/pendulum_resume', {method: 'POST'});
                    }, 3000);
                })
                .then(response => {
                    if (response) {
                        logMessage(`✅ 恢复请求成功: ${response.status}`);
                    }
                })
                .catch(error => {
                    logMessage(`❌ 请求失败: ${error}`);
                });
        }
        
        // 监控摄像头事件
        cameraFeed.addEventListener('loadstart', () => {
            if (monitoring) {
                logMessage('📡 开始加载视频流');
                requestCount++;
                updateStats();
            }
        });
        
        cameraFeed.addEventListener('load', () => {
            if (monitoring) {
                logMessage('✅ 视频流加载成功');
                status.textContent = '✅ 摄像头已连接';
                status.className = 'status connected';
                
                // 计算FPS
                frameCount++;
                const now = performance.now();
                if (now - lastFpsTime >= 1000) {
                    currentFps = frameCount;
                    frameCount = 0;
                    lastFpsTime = now;
                }
                updateStats();
            }
        });
        
        cameraFeed.addEventListener('error', () => {
            if (monitoring) {
                logMessage('❌ 视频流加载失败');
                errorCount++;
                status.textContent = '❌ 摄像头连接失败';
                status.className = 'status error';
                updateStats();
            }
        });
        
        cameraFeed.addEventListener('abort', () => {
            if (monitoring) {
                logMessage('🚫 视频流请求被取消');
                cancelCount++;
                updateStats();
            }
        });
        
        // 定期更新状态
        setInterval(() => {
            if (monitoring) {
                updateStats();
            }
        }, 1000);
        
        // 页面加载时开始监控
        window.addEventListener('load', () => {
            logMessage('📄 页面已加载，开始监控摄像头请求');
            startMonitoring();
        });
    </script>
</body>
</html> 